<template>
  <page-view :title="title" subTitle="管理系统中的用户账号，分配角色">
    <a-form slot="headerContent" layout="inline">
      <a-form-item>
        <a-input placeholder="账号、名称、电话" v-model="key" @change="handleSearchChange"/>
      </a-form-item>
    </a-form>

    <a-row slot="extra" class="status-list">
      <a-col :xs="24" :sm="24">
        <div class="text">用户数</div>
        <div class="heading">{{ total }}</div>
      </a-col>
    </a-row>

    <template slot="action">
      <a-button-group style="margin-right: 4px;">
        <a-popover title="提示" trigger="click">
          <template slot="content">
            <p>下面列出了您企业的所有员工账号</p>
            <p>您在这里是无法看到自己的账号的</p>
            <p>如需编辑自己的账号信息，请点击右上角<b>个人中心</b></p>
          </template>
          <a-button>提示</a-button>
        </a-popover>
      </a-button-group>
      <a-button type="primary" @click="$router.push('/system/user-manage/create')">新增</a-button>
    </template>

    <a-card :bordered="false">
      <a-table
        rowKey="id"
        :columns="columns"
        :dataSource="list"
        :pagination="false">
        <span slot="name" slot-scope="value">
          <highlight-text :text="value" :keyword="key"></highlight-text>
        </span>
        <span slot="nick" slot-scope="value">
          <highlight-text :text="value" :keyword="key"></highlight-text>
        </span>
        <span slot="phone" slot-scope="value">
          <highlight-text :text="value" :keyword="key"></highlight-text>
        </span>
        <span slot="roleName" slot-scope="value,row">
          {{ row.root ? '超级管理员' : (value || '-') }}
        </span>
        <span slot="dataScope" slot-scope="value,row">
          {{ row.root ? '全部数据' : (dataScopeMap[value] || '-') }}
        </span>
        <span slot="updated" slot-scope="value,row">
          {{ row.updated | fromNow }}
        </span>
        <span slot="action" slot-scope="text, row, index">
          <a @click.prevent="handleClickSetting(row,index)">设置</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="是否要删除此行？" @confirm="handleClickDelete(row,index)">
            <a @click.stop>删除</a>
          </a-popconfirm>
        </span>
      </a-table>
    </a-card>

  </page-view>
</template>

<script>

  import {mapGetters} from 'vuex'
  import {PageView} from '@/layouts'
  import {debounce} from 'lodash'
  import {deleteUser, findUsers} from '@/api/user'
  import HighlightText from '@/components/HighlightText'

  const columns = [{
    title: '用户账号',
    dataIndex: 'name',
    key: 'name',
    scopedSlots: {customRender: 'name'}
  }, {
    title: '昵称',
    dataIndex: 'nick',
    key: 'nick',
    scopedSlots: {customRender: 'nick'}
  }, {
    title: '电话',
    dataIndex: 'phone',
    key: 'phone',
    scopedSlots: {customRender: 'phone'}
  }, {
    title: '部门',
    dataIndex: 'deptName',
    key: 'deptName'
  }, {
    title: '角色',
    dataIndex: 'roleName',
    key: 'roleName',
    scopedSlots: {customRender: 'roleName'}
  }, {
    title: '数据权限',
    dataIndex: 'dataScope',
    key: 'dataScope',
    scopedSlots: {customRender: 'dataScope'}
  }, {
    title: '更新时间',
    dataIndex: 'updated',
    key: 'updated',
    scopedSlots: {customRender: 'updated'}
  }, {
    title: '操作',
    key: 'action',
    scopedSlots: {customRender: 'action'}
  }]

  export default {

    name: 'UserManageView',

    components: {
      PageView,
      HighlightText
    },

    data() {
      return {
        columns,
        key: '',
        list: [],
        total: 0
      }
    },

    computed: {
      ...mapGetters(['dataScopeMap']),
      title() {
        return this.$route.meta.title
      }
    },

    created() {
      this.queryData()
    },

    mounted() {
      this.handleSearchChange = debounce(this.handleSearchChange, 500)
    },

    methods: {

      queryData() {
        findUsers(this.key).then(resp => {
          this.list = resp.result.list
          this.total = resp.result.list.length
        })
      },

      handleSearchChange() {
        this.queryData()
      },

      handleClickSetting(row, index) {
        this.$ls.set('user_setting_review_data', row)
        this.$router.push('/system/user-manage/setting')
      },

      handleClickDelete(row, index) {
        deleteUser(row.id).then(() => {
          this.list.splice(index, 1)
          this.total -= 1
          this.$message.warn('删除用户成功')
        })
      },

    }

  }
</script>

<style lang="less" scoped>
</style>
